<template>
  <client-only>
    <div class="article-actions">
      <div
        v-for="action in actions"
        :key="action.key"
        :class="['action-item', { active: action.active }]"
        @click="handleAction(action.key)"
      >
        <component :is="action.icon" class="icon" style="font-size: 24px" />
        <span class="label">{{ action.label }}</span>
        <span class="count">{{ formatCount(action?.count) }}</span>
      </div>
    </div>
  </client-only>
</template>

<script setup lang="ts">
import { HeartFilled, LikeFilled, MessageFilled } from '@ant-design/icons-vue'
import { ref, markRaw } from 'vue'
import IconFullscreen from '~/assets/icons/IconFullscreen.vue'
import storage from '@/utils/storage'
import {
  getInteractionLikeStatus,
  postInteractionLike,
  getInteractionCollectStatus,
  postInteractionCollect,
} from '@/api/article'
interface Action {
  key: string
  icon: any
  label: string
  count?: number
  active?: boolean
}
const props = defineProps<{
  commentCountNumber: number
  detail: any
}>()
const emit = defineEmits<{
  like: []
  collect: []
  fullscreen: []
  comment: []
}>()

const actions = ref<Action[]>([
  { key: 'like', icon: markRaw(LikeFilled), label: '点赞', count: 0, active: false },
  { key: 'collect', icon: markRaw(HeartFilled), label: '收藏', count: 0, active: false },
  { key: 'fullscreen', icon: markRaw(IconFullscreen), label: '全屏', active: false },
  { key: 'comment', icon: markRaw(MessageFilled), label: '评论', count: 0 },
])
// 计算属性获取local中存储的用户信息
const userInfo = computed(() => {
  return storage.get('user') || null
})

// 监听props的值，对actions进行同步赋值
watch(
  () => props.detail,
  (detail) => {
    if (detail) {
      const { likeCount, favoriteCount } = detail
      actions.value[0].count = likeCount || 0
      actions.value[1].count = favoriteCount || 0
    }
  },
  { immediate: true },
)
watch(
  () => props.commentCountNumber,
  (count) => {
    actions.value[3].count = count
  },
  { immediate: true },
)
const handleAction = (key: string) => {
  console.log('action key:', key)
  if (key === 'like') {
    handleLike({
      articleId: +props.detail.id,
      userId: +userInfo.value?.id || -1,
      num: +actions.value[0].count,
    })
    // 判断是否是点赞
    if (actions.value[0].active) {
      actions.value[0].count = actions.value[0].count - 1
    } else {
      actions.value[0].count = actions.value[0].count + 1
    }
  } else if (key === 'collect') {
    handleCollect({
      articleId: +props.detail.id,
      userId: +userInfo.value?.id || -1,
      num: +actions.value[1].count,
    })
    if (actions.value[1].active) {
      actions.value[1].count = actions.value[1].count - 1
    } else {
      actions.value[1].count = actions.value[1].count + 1
    }
  }
  emit(key as any)
}

const formatCount = (count: number) => {
  if (count >= 1000) {
    return (count / 1000).toFixed(1) + 'k'
  }
  return count
}
// 获取用户是否点赞，需要登录
const getLikeStatus = (params: { articleId: string; userId: string }) => {
  getInteractionLikeStatus(params).then((res) => {
    if (res.code === 200) {
      actions.value[0].active = res?.data || false
    }
  })
}
// 获取用户是否收藏，需要登录
const getCollectStatus = (params: { articleId: string; userId: string }) => {
  getInteractionCollectStatus(params).then((res) => {
    if (res.code === 200) {
      actions.value[1].active = res?.data || false
    }
  })
}
// 点赞取消点赞，需要登录
const handleLike = (params: { articleId: string; userId: string; num: number }) => {
  postInteractionLike(params).then((res) => {
    if (res.code === 200) {
      getLikeStatus({
        articleId: +props.detail.id,
        userId: +userInfo.value?.id || '',
      })
    }
  })
}
// 收藏取消搜藏，需要登录
const handleCollect = (params: { articleId: string; userId: string; num: number }) => {
  postInteractionCollect(params).then((res) => {
    if (res.code === 200) {
      getCollectStatus({
        articleId: +props.detail.id,
        userId: +userInfo.value?.id || '',
      })
    }
  })
}
watch(
  () => props.detail,
  (detail) => {
    if (detail) {
      if (!props.detail.id) return
      getLikeStatus({
        articleId: +props.detail.id,
        userId: +userInfo.value?.id || '',
      })
      getCollectStatus({
        articleId: +props.detail.id,
        userId: +userInfo.value?.id || '',
      })
    }
  },
  { immediate: true },
)
</script>

<style scoped>
.article-actions {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  position: sticky;
  top: 30vh;
}

.action-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px 8px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s;
  color: #718096;
}

.action-item:hover {
  background: #f7fafc;
  color: #667eea;
  transform: translateY(-2px);
}

.action-item.active {
  color: #667eea;
}

.action-item.active .icon {
  fill: #667eea;
}

.icon {
  width: 24px;
  height: 24px;
  transition: all 0.3s;
}

.label {
  font-size: 12px;
  font-weight: 600;
}

.count {
  font-size: 11px;
  color: #a0aec0;
}

.action-item.active .count {
  color: #667eea;
}

/* 移动端样式 */
@media (max-width: 968px) {
  .article-actions {
    flex-direction: row;
    position: static;
    justify-content: space-around;
    padding: 12px;
  }

  .action-item {
    padding: 8px;
  }

  .icon {
    width: 20px;
    height: 20px;
  }

  .label {
    font-size: 11px;
  }

  .count {
    font-size: 10px;
  }
}
</style>
